<script lang="ts" setup>
import { reactive } from 'vue';
import { Secs1Options } from '../../common/types';
import { Secs1Mode, BaudRate } from '../../common/enums';

const data = reactive<Secs1Options>({
    mode: Secs1Mode.TCP_IP,
    com: '',
    baudRate: 0,
    ip: '',
    port: 0,
    t1: 500,
    t2: 10000,
    t3: 45000,
    t4: 45000,
    retry: 3,
    isInterleave: false,
    isMaster: true
});

const load = (options: Secs1Options) => {
    data.mode = options.mode;
    data.com = options.com;
    data.baudRate = options.baudRate;
    data.ip = options.ip;
    data.port = options.port;
    data.t1 = options.t1;
    data.t2 = options.t2;
    data.t3 = options.t3;
    data.t4 = options.t4;
    data.retry = options.retry;
    data.isInterleave = options.isInterleave;
    data.isMaster = options.isMaster;
};

const getData = () => {
    return { ...data };
}
defineExpose({ load, getData })

</script>
<template>
    <table class="app-table-1">
        <tbody>
            <tr>
                <th style="width: 50px">
                    Mode
                </th>
                <td style="width: 160px">
                    <el-select v-model="data.mode" style="width:130px">
                        <el-option label="TCP/IP" :value="Secs1Mode.TCP_IP"></el-option>
                        <el-option label="COM" :value="Secs1Mode.COM"></el-option>
                    </el-select>
                </td>
                <th style="width: 50px"></th>
                <td style="width: 130px"></td>
            </tr>
            <tr v-show="data.mode == Secs1Mode.TCP_IP">
                <th>
                    IP
                </th>
                <td>
                    <el-input v-model="data.ip" style="width: 130px;"></el-input>
                </td>
                <th>
                    Port
                </th>
                <td>
                    <el-input-number v-model="data.port" :min="0" :max="65535" style="width: 130px" />
                </td>
            </tr>
            <tr v-show="data.mode == Secs1Mode.COM">
                <th>
                    COM
                </th>
                <td>
                    <el-select v-model="data.com" style="width:130px">
                    </el-select>
                </td>
                <th>
                    Baud Rate
                </th>
                <td>
                    <el-select v-model="data.baudRate" style="width:130px">
                        <el-option label="Auto" :value="BaudRate.Auto"></el-option>
                        <el-option label="1200" :value="BaudRate.Fixed_1200"></el-option>
                        <el-option label="2400" :value="BaudRate.Fixed_2400"></el-option>
                        <el-option label="4800" :value="BaudRate.Fixed_4800"></el-option>
                        <el-option label="9600" :value="BaudRate.Fixed_9600"></el-option>
                        <el-option label="19200" :value="BaudRate.Fixed_19200"></el-option>
                    </el-select>
                </td>
            </tr>
            <tr>
                <th>
                    T1
                </th>
                <td>
                    <el-input-number v-model="data.t1" :min="500" :max="10000" :precision="1" style="width: 130px" />
                </td>
                <th>

                </th>
                <td>

                </td>
            </tr>
            <tr>
                <th>
                    T2
                </th>
                <td>
                    <el-input-number v-model="data.t2" :min="1000" :max="120000" style="width: 130px" />
                </td>
                <th>
                    Retry
                </th>
                <td>
                    <el-input-number v-model="data.retry" :min="1000" :max="20000" style="width: 130px" />
                </td>
            </tr>
            <tr>
                <th>
                    T3
                </th>
                <td>
                    <el-input-number v-model="data.t3" :min="1000" :max="120000" style="width: 130px" />
                </td>
                <th>
                    Interleave
                </th>
                <td>
                    <el-checkbox v-model="data.isInterleave" label="" />
                </td>
            </tr>
            <tr>
                <th>
                    T4
                </th>
                <td>
                    <el-input-number v-model="data.t4" :min="1000" :max="120000" style="width: 130px" />
                </td>
                <th>
                    Master
                </th>
                <td>
                    <el-checkbox v-model="data.isMaster" label="" />
                </td>
            </tr>
        </tbody>
    </table>
</template>